<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        *{
            margin: 0;
            padding:0;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 1226px;
            height: 460px;
            background-color: skyblue;
            margin: 50px auto;
        }
        .left{
            float: left;
            width:20%;
            height:100%;
            background-color: bisque;
        }
        .left>ul>li{
            padding:20px 80px;
        }

        .right{
            width: 80%;
            height: 100%;
            background-color: orange;
            float: right;
        }

        .right>div{
            width:100%;
            height:100%;
            display: none;
        } 

        .left li:first-child{
            background-color: orange;
        }
        
        .right div:first-child{
            display: block;
        }


    </style>

</head>
<body>
    

    <div class="box">
        <div class="left">
            <ul>
                <li>安全管理</li>
                <li>权限管理</li>
                <li>登录管理</li>
                <li>角色管理</li>
                <li>密码设置</li>
                <li>运行维护</li>
                <li>字典管理</li>
            </ul>
        </div>

        <div class="right">
            <div>安全管理</div>
            <div>权限管理</div>
            <div>登录管理</div>
            <div>角色管理</div>
            <div>密码设置</div>
            <div>运行维护</div>
            <div>字典管理</div>
        </div>
    </div>

    <script>
        let lis = document.querySelectorAll('.left li');
        let divs = document.querySelectorAll('.right div')
        for(let i = 0;i < lis.length;i++){
            lis[i].onmouseover = function(){

                for(let j = 0;j < lis.length;j++){
                    lis[j].style.backgroundColor = 'bisque';
                    divs[j].style.display = 'none';
                }

                this.style.backgroundColor = 'orange';
                divs[i].style.display = 'block';
            }
        }


        
    </script>
</body>
</html>